<template>
	<view class="home">
		<!-- 轮播图区域 -->
		<swiper circular indicator-dots autoplay :interval="3000" :duration="500">
			<swiper-item v-for="item in swipers" :key="item.goods_id">
				<image @click="goDetail(item.goods_id)" :src="item.image_src" mode=""></image>
			</swiper-item>
		</swiper>

		<!-- 导航区域 -->
		<view class="navs">
			<view @click="goCate" class="nav-item" v-for="(item, index) in navs" :key="index">
				<image :src="item.image_src"></image>
			</view>
		</view>

		<!-- 楼层区域 -->
		<view class="floor-list">
			<!-- 楼层 item 项 -->
			<view class="floor-item" v-for="(item,i) in floors" :key="i">
				<!-- 楼层标题 -->
				<image :src="item.floor_title.image_src" class="floor-title"></image>
				<!-- 楼层的图片 -->
				<view class="img_box">
					<!-- 左侧区域 -->
					<image @click="goGoodsList(item.product_list[0].navigator_url)" class="left"
						:src="item.product_list[0].image_src"></image>
					<!-- 右侧区域 -->
					<view class="right">
						<image @click="goGoodsList(item2.navigator_url)" v-for="(item2, i2) in item.product_list"
							v-if="i2 !== 0" :src="item2.image_src" mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		loadSwipers,
		loadNavs,
		loadFloors
	} from '../../api/home.js'
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {

				// 导航数据
				navs: [],
				// 楼层数据
				floors: []
			};
		},
		onShow() {
			uni.setTabBarBadge({
				index: 2,
				text: this.totalCount + ''
			})
		},
		computed: {
			...mapState('home', ['swipers']),
			...mapGetters('cart', ['totalCount'])
		},
		methods: {
			...mapMutations('home', ['setSwipers']),
			// 获取轮播图
			async getHomeSwipers() {
				//第一个参数就是接口地址
				// fly.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(res => {
				// 	this.swipers = res.data.message
				// })

				// 等待Promise的成功结果 async 放在await最近的函数
				const res = await loadSwipers()
				// this.swipers = res.data.message
				this.setSwipers(res.data.message)
			},
			// 跳转到商品详情
			goDetail(id) {
				uni.navigateTo({
					url: "/pages/goods_detail/goods_detail?id=" + id
				})
			},
			// 获取导航数据
			async getNavs() {
				const res = await loadNavs()
				this.navs = res.data.message
			},
			// 跳转到分类页
			goCate() {
				uni.switchTab({
					url: "/pages/cate/cate" // tabbar页面，需要使用switchTab进行跳转
				})
			},
			// 获取楼层数据
			async getHomeFloors() {
				const res = await loadFloors()
				this.floors = res.data.message
			},
			// 跳转商品列表
			goGoodsList(url) {
				// navigator_url ?
				uni.navigateTo({
					url: "/pages/goods_list/goods_list?" + url.split('?')[1]
				})
			}
		},
		// mounted钩子属于vue的
		// 页面进入开始加载
		onLoad() {
			this.getHomeSwipers()
			this.getNavs()
			this.getHomeFloors()

		}
	}
</script>

<style lang="scss">
	.home {

		// 轮播图区域样式
		swiper {
			width: 750rpx;
			height: 330rpx;

			swiper-item {
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		// 导航区域
		.navs {
			display: flex; // 开启flex 子盒子会在一行
			justify-content: space-around; // 设置子盒子的主轴（x轴）对齐方式
			margin: 15rpx 0;

			.nav-item {
				image {
					width: 128rpx;
					height: 140rpx;
				}
			}
		}

		// 楼层区域
		.floor-list {
			.floor-item {
				.floor-title {
					height: 60rpx;
					width: 100%;
				}

				.img_box {
					display: flex;
					justify-content: space-between;
					padding: 0 15rpx;

					.left {
						width: 232rpx;
						height: 392rpx;
					}

					.right {
						width: 500rpx;
						display: flex;
						justify-content: flex-end;
						flex-wrap: wrap;

						image {
							width: 233rpx;
							height: 190rpx;
							margin: 5rpx;
						}
					}
				}
			}
		}
	}
</style>
